<template>
  <div class="PocketAI">
    <div class="PocketAI-search-tabs">
      <h3 style="display: flex; width: 100%;align-items: center; text-align: start;margin: 20px 0;padding: 0 10px;">
        <span>会议助手</span>
        <el-popover popper-style="border-radius: 8px;
background: linear-gradient(180deg, #DFE5FF 0%, #FFF 40%);
  padding-top: 20px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);" placement="bottom" title="设置会议清除规则" :width="200" trigger="click">
          <template #default>
            <div class="radio-container">
              <el-radio-group v-model="selectedOption" @change="handleOptionChange">
                <hr style="border-color: #91c7ff1a;width: 100%;" />
                <el-radio :label="1">
                  <div style="display: flex;width: 100%;">
                    <span>保留最后一次记录</span>
                    <SvgIcon v-show="selectedOption === 1" name="对勾" style="margin-left: 10px;" :size="20" />
                  </div>
                </el-radio>
                <el-radio :label="2">
                  <div style="display: flex;width: 100%;">
                    <span>不自动清除</span>
                    <SvgIcon v-show="selectedOption === 2" name="对勾" style="margin-left: 10px;" :size="20" />
                  </div>
                </el-radio>
              </el-radio-group>
            </div>
          </template>
          <template #reference>
            <el-button circle style="background-color: transparent;border: none;margin-left: auto;">
              <SvgIcon name="设置" :size="20" />
            </el-button>
          </template>
        </el-popover>
      </h3>
      <div class=" tabs" v-for="(item, index) in dateList" :key="index">
        <div :class="`tabs-title`">
          <h5 style="margin-left: 15px">{{ index }}</h5>
        </div>
        <div v-for="ite in item" :key="useId" :class="`tabs-item ${tabActive === ite.meetingId ? 'tabActive' : ''}`"
          @click="tabsActive(ite)" @mouseover="handleMouseOver(ite)">
          <span>{{ ite.meetingHour }}</span>
          <span v-if="mouseActive === ite.meetingId" @click="open(ite.meetingId)">
            <SvgIcon name="删除" :size="20" />
          </span>
        </div>
      </div>

      <el-button class="delete-all-btn" type="default" @click="handleDeleteAll">
        <SvgIcon name="删除" :size="25" />
        <span>全部删除</span>
      </el-button>

    </div>
    <div class="PocketAI-content">
      <header class="PocketAI-header">
        <div style="margin-right:auto">
          <el-input :disabled="isEdit" v-if="nowMeetingName != null" v-model="nowMeetingName.meetingHour"
            style="font-size: 16px;font-weight: bold; border-radius: 10px;" @blur="updateMeetingName(nowMeetingName)"
            @keyup.enter="updateMeetingName(nowMeetingName)">
            <template #suffix>
              <SvgIcon style="cursor: pointer;width: 20px; height: 20px; margin-right: 5px;" class="edit" name="编辑"
                :size="30" @click="isEdit = false" />
            </template>
          </el-input>
        </div>

        <el-radio-group v-model="tabPosition" style="padding: 5px;background-color: #fff;border-radius: 100px;">
          <el-radio-button value="time">
            <div class="flex">
              <SvgIcon name="编辑AI" :size="15" :color="tabPosition === 'time' ? '#fff' : '#000'" /> <span>会议记录</span>
            </div>
          </el-radio-button>
          <el-radio-button value="text">
            <div class="flex">
              <SvgIcon v-if="tabPosition === 'text'" name="书1" :size="15" />
              <SvgIcon v-else name="书2" :size="15" />
              <span>AI总结会议纪要&nbsp;</span>
              <SvgIcon v-if="tabPosition === 'text'" name="AI1" :size="15" color="#fff" />
              <SvgIcon v-else name="AI2" :size="15" />
            </div>
          </el-radio-button>
        </el-radio-group>

        <div class="flex" style="margin-left :auto;">
          <el-popover placement="bottom" :width="10" trigger="hover">
            <template #default>
              <div class="popover-button" @click="shareEmail" style="width:100%;text-align: center;">
                邮件分享
              </div>

            </template>
            <template #reference>
              <el-button circle>
                <SvgIcon name="分享" :size="15" />

              </el-button>
            </template>
          </el-popover>
          <el-popover placement="bottom" :width="10" trigger="hover">
            <template #default>
              <div class="popover-button" @click="handleDownlod" style="width:100%;text-align: center;">
                下载文件
              </div>

            </template>
            <template #reference>
              <el-button circle style="margin-right: 10px;">
                <SvgIcon name="下载" :size="15" />

              </el-button>
            </template>
          </el-popover>
          <SvgIcon name="星" :size="20" />
          <span style="font-size: 12px">AI精简</span>
          <el-switch class="switch" v-model="aiStreamLine" />
        </div>
      </header>
      <Time v-show="tabPosition === 'time'" :meetingId="meetingId" :aiStreamLine="aiStreamLine" />
      <Text v-show="tabPosition === 'text'" :meetingId="meetingId" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import Time from './components/time.vue';
import Text from './components/text.vue';
import { useI18n } from 'vue-i18n'
import { useId } from 'element-plus';
import SvgIcon from '@/components/SvgIcon.vue';
import { listMeeting, delMeetingById, updateMeetingNameById } from "@/api/index.js";
import { ElMessage, ElMessageBox } from 'element-plus'

const { t } = useI18n()
const router = useRouter()
const tabActive = ref('knowledge')
const tabPosition = ref()
const dateList = ref({})
const meetingId = ref()
const mouseActive = ref()
const aiStreamLine = ref(false)
const nowMeetingName = ref()
const isEdit = ref(true)

const tabsActive = (data) => {
  aiStreamLine.value = false
  tabActive.value = data.meetingId
  meetingId.value = data.meetingId
  tabPosition.value = 'time'
  nowMeetingName.value = data
}

const handleMouseOver = (e) => {
  mouseActive.value = e.meetingId
}

const open = (id) => {
  ElMessageBox.confirm(
    '确定删除该条会议记录吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const formData = new FormData()
      formData.append("id", id);
      delMeetingById(formData).then(res => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '会议删除成功',
          })
          listMeeting().then(response => {
            if (response.code === 200) {
              dateList.value = response.data
            }
          });
        }
      })
    })
}

const handleDeleteAll = () => {
  ElMessageBox.confirm(
    '确定删除所有会议记录吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delMeetingById({}).then(res => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '所有会议记录删除成功',
          })
          listMeeting().then(response => {
            if (response.code === 200) {
              dateList.value = response.data
            }
          });
        }
      })
    })
    .catch(() => {
      // 用户取消删除操作
    })
}

onMounted(() => {
  tabActive.value = router.currentRoute.value.name
  aiStreamLine.value = false
  listMeeting().then(res => {
    if (res.code === 200) {
      dateList.value = res.data
    }
  });
  // dateList.value = { '10月29日 周二': ['会议_12:00', '会议_13:00', '会议_14:00'], '10月29日 周三': ['会议_12:00', '会议_13:00', '会议_14:00'] }
})

const updateMeetingName = async (item) => {
  isEdit.value = true
  const formData = new FormData();
  formData.append("meetingId", item.meetingId)
  formData.append("meetingName", item.meetingHour)
  const data = await updateMeetingNameById(formData)
  listMeeting().then(res => {
    if (res.code === 200) {
      dateList.value = res.data
    }
  });
}


const shareEmail = () => {
  // 创建mailto链接
  const mailtoLink = "mailto:?subject=AI会议纪要&body=请查看附件中的AI会议纪要"

  // 打开默认邮件客户端
  window.location.href = mailtoLink

  // 显示提示消息
  ElMessage({
    message: '请到邮箱中查看AI总结会议纪要发送情况',
    type: 'success',
    duration: 3000
  })
}
const handleDownlod = () => {

}

const selectedOption = ref(1) // Default to first option
const handleOptionChange = (value) => {
  console.log(value)
}
</script>

<style lang="scss" scoped>
.PocketAI {
  display: flex;
  width: 100%;
  height: 100%;

  .PocketAI-search-tabs {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 300px;
    padding: 0 5px;
    height: 100%;
    border-right: 1px solid #e1e1e1;
    overflow-y: auto;


    .tabs {
      display: flex;
      flex-direction: column;
      align-items: center;


      .tabs-item {
        position: relative;
        width: 156px;
        height: 48px;
        display: flex;
        transition: all 0.3s;
        align-items: center;
        justify-content: space-between;
        padding-left: 12px;
        border-radius: 33px;
        margin-bottom: 10px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;


        span {
          margin-left: 0px;
          font-size: 14px;
        }
      }

      .tabs-title {
        position: relative;
        width: 200px;
        height: 48px;
        display: flex;
        transition: all 0.3s;
        align-items: center;
        justify-content: start;
        padding-left: 12px;
        border-radius: 33px;
        margin-bottom: 10px;

      }

      .tabActive {
        border-radius: 20px;
        background: #DEE5FE;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          right: 10px;
          //transform: translate(0, -50%);
          /* 三角形的宽度 */
          width: 0;
          height: 0;
          //border-top: 5px solid transparent;
          ///* 三角形的高度 */
          //border-bottom: 5px solid transparent;
          ///* 三角形的高度 */
          //border-left: 5px solid var(--el-color-primary);
          ///* 三角形的颜色和宽度 */
        }

        span {
          color: #225FFE;
        }
      }
    }
  }


  .PocketAI-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    .PocketAI-header {
      width: 100%;
      height: 100px;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      :deep(.el-radio-button__inner) {
        border-radius: 100px;
        border: none;
        transition: all 0s;
      }

      :deep(.el-radio-button:nth-child(2)) {

        .el-radio-button__original-radio:checked+.el-radio-button__inner {
          background: linear-gradient(90deg, #5662FD 0%, #C64BFF 100%);
          border-color: transparent;
        }

      }
    }
  }
}

.delete-all-btn {
  position: fixed;
  bottom: 20px;
  border-radius: 20px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
}


.delete-all-btn:hover {
  background-color: #f5f7fa;
}

.popover-button {
  padding: 4px 0;
  //小手
  cursor: pointer;

  &:hover {
    background-color: #f5f7fa;
  }
}

.radio-container {

  :deep(.el-radio__inner) {
    display: none;
  }
}

/* Optional: Customize radio appearance to match the design */
:deep(.el-radio) {
  margin: 5px 0;
  margin-right: 20px;
}

:deep(.el-radio__label) {
  color: #333;
}
</style>
